<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>学生成绩分析-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/echarts-3.8.4.js"></script>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a href="<%=basePath %>/ls/score/report/student" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title" ><span class="schoolYear"></span>成绩分析</h1>
	    	<div class="weui-header-right">
	    		<i class="icon icon-74"></i>
	    		<input type="text" id="schoolYear" readonly style="position: absolute;top: 0;opacity: 0;">
	    	</div>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell bd-t0">
					<div class="weui_cell_hd weui_center_50">
						${student.gradeName }(${student.clazz })班
					</div>
					<div class="weui_cell_hd weui_center_50">
						${student.name }
					</div>
				</div>
			</div>
	        <div class="weui_cells afterNone afterNoneBefore mt0">
	          	<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="schoolYear"></span> 综合成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currTermExam" style="width: 100%;height:320px;"></div>
	          	</div>
	          	
	          	<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span id="newestExam"></span> 考试成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currExam" style="width: 100%;height:320px;"></div>
	          	</div>
	          	<div class="weui_cell bd-t0" style="margin-top: -80px;" id="examScoreList">
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell bd-t0" id="prizeList">
	          		<div class="weui_cell_hd">
						<img src="<%=basePath %>/images/huojiangdengji@3x.png" style="width:18px;margin-right:5px;display:block">
					</div>
					<div class="weui_cell_hd">
						<p class="pr15"><span class="schoolYear"></span> 获奖荣誉</p>
					</div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell bd-t0" id="schoolPrizeList">
	          		<div class="weui_cell_hd">
						<img src="<%=basePath %>/images/huojiangdengji@3x.png" style="width:18px;margin-right:5px;display:block">
					</div>
					<div class="weui_cell_hd">
						<p class="pr15"><span class="schoolYear"></span> 校内奖项</p>
					</div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">学生历次考试分数的升降图</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="totalTermExam" style="width: 100%;height:450px;"></div>
	          	</div>
      		</div>
		</div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		termList();
		setTimeout(function(){termExam(null)}, 1000);
	})
	function termList() {
		$.ajax({
    		url: basePath + "/termList",
    		type: 'POST',
    		dataType : "json",
    		success: function(data) {
    			var list = [];
    			var map = new Map();
    			for(var i in data) {
    				var termYear = data[i].termName.substr(0,data[i].termName.lastIndexOf("学期")-1)
    				var year = data[i].termName.substr(0,data[i].termName.indexOf("-"));
    				if(i == 0) {
    					termExam(termYear);
    		          	prizeList(data[i].termName);
    				}
    				if(map.get(year) == null) {
    					map.set(year, termYear);
    					list.push(termYear);
    				}
    			}
    			$("#schoolYear").picker({
    			     title: "请选择学年",
    			     toolbarCloseText:'确定',
    			     onClose:function(){
    			     	termExam(this.cols[0].displayValue);
    			     	prizeList(this.cols[0].displayValue);
    			     },
    			     cols: [
    			       {
    			         textAlign: 'center',
    			         values: list
    			       }
    			     ]
    			   });
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function termExam(termName) {
		$.ajax({
    		url: basePath + "/student/groupup/studentScore/query",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			termYear: termName != null ? termName.substr(0,4) : termName
    		},
    		success: function(rspData) {
    			if(rspData.length == 0){
    				$.alert("没有考试数据!", "");
    				return;
    			}
    			if(termName != null) {
    				$(".schoolYear").html(termName);
    				currTermExamReport(rspData);
        			currExam(rspData[rspData.length - 1].examId);
    			}else {
    				totalTermExamReport(rspData);
    			}
    			
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExam(examId) {
		$.ajax({
    		url: basePath + "/student/groupup/studentScore/query",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			examId: examId
    		},
    		success: function(resp) {
    			if(resp.length == 0) return;
    			$("#newestExam").html(resp[0].termName + resp[0].examName);
    			$("#examScoreList").html('\
	    			<div class="weui_cell_hd weui_center_25">\
			          	<p class="score_circle score_sum_border">\
			  				<span class="f15">总分</span>\
			  				<span class="score_sum_color">'+resp[0].sumScore+'</span>\
			  			</p>\
			  		</div>\
			  		<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_chiness_border">\
			  				<span class="f15">语文</span>\
			  				<span class="score_chiness_color">'+resp[0].chineseScore+'</span>\
			  			</p>\
					</div>\
			  		<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_english_border">\
			  				<span class="f15">英语</span>\
			  				<span class="score_english_color">'+resp[0].englishScore+'</span>\
			  			</p>\
					</div>\
					<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_math_border">\
			  				<span class="f15">数学</span>\
			  				<span class="score_math_color">'+resp[0].mathScore+'</span>\
			  			</p>\
					</div>');
    			var examAvgScore = '<div class="weui_cell bd-t0 score_item"><div class="weui_cell_hd weui_center_25">年级平均分</div>';
	          	for(var i in resp[0].scoreAvgList) {
	          		examAvgScore += '<div class="weui_cell_hd weui_center_25">'+resp[0].scoreAvgList[i].avgScore+'</div>';
	          	}
	          	examAvgScore += '</div>';
	          	var itemHtml = '<div class="weui_cell score_item">\
		          		<div class="weui_cell_hd weui_center_25 f-14"><b>学科</b></div>\
		          		<div class="weui_cell_hd weui_center_25 f-14"><b>分数</b></div>\
		          		<div class="weui_cell_hd weui_center_25 f-14"><b>平均分</b></div>\
		          	</div>\
		          	<div class="weui_cell score_item">\
		          		<div class="weui_cell_hd weui_center_25 f-14">语文</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].chineseScore+'</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].scoreAvgList[0].avgScore+'</div>\
		          	</div>\
		          	<div class="weui_cell score_item">\
		          		<div class="weui_cell_hd weui_center_25 f-14">英语</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].mathScore+'</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].scoreAvgList[1].avgScore+'</div>\
		          	</div>\
		          	<div class="weui_cell score_item">\
		          		<div class="weui_cell_hd weui_center_25 f-14">数学</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].englishScore+'</div>\
		          		<div class="weui_cell_hd weui_center_25 f-14">'+resp[0].scoreAvgList[2].avgScore+'</div>\
		          	</div>';
		        $(".score_item").remove();
		        $("#examScoreList").after(itemHtml);
		        $("#examScoreList").after(examAvgScore);
	          	currExamReport(resp[0]);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function prizeList(termName) {
		var termYear = termName.substr(0,4);
		$.ajax({
    		url: basePath + "/student/groupup/prizeList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			termYear: termYear
    		},
    		success: function(respData) {
    			if(respData != null) {
    				var prizeList = '', schoolPrizeList = '';
    				for(var i in respData.fruits) {
    					prizeList += '<div class="weui_cell bd-t0 prizeList" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
   	    	          		<div class="weui_cell_hd f15 f-gray4e weui_75">'+respData.fruits[i].competitionName+'</div>\
   	    	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25">'+respData.fruits[i].awardLevel + " " + respData.fruits[i].awardGrade+'</div>\
   	    	          	</div>';
    				}
    				$(".prizeList").remove();
    				$("#prizeList").after(prizeList);
    				for(var i in respData.prizes) {
    					schoolPrizeList += '<div class="weui_cell bd-t0 schoolPrizeList" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
   	    	          		<div class="weui_cell_hd f15 f-gray4e">'+respData.prizes[i].prizeName+'</div>\
   	    	          	</div>';
    				}
    				$(".schoolPrizeList").remove();
    				$("#schoolPrizeList").after(schoolPrizeList);
    			}
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExamReport(data) {
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currExam'));
		option = {
		    tooltip: {},
		    radar: {
		        name: {
		            textStyle: {
		                color: '#fff',
		                backgroundColor: '#999',
		                borderRadius: 3,
		                padding: [3, 5]
		           }
		        },
		        indicator: [
		           { name: '语文', max: 120},
		           { name: '数学', max: 120},
		           { name: '英语', max: 120}
		        ],
	            radius: 120
		    },
		    series: [{
		    	name: "分数",
		        type: 'radar',
		        radarIndex: 0,
		        data : [{
		        	value: (function () {
			        	return [data.chineseScore, data.mathScore, data.englishScore];
			        })()
		        }]
		    }]
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	var examTemp = [];
	function currTermExamReport(list) {
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:["语文", "数学", "英语", "总分"]
		    },
		    grid: {
		    	hoverable:true,
		    	bottom: '30%'
		    },
		    xAxis: {
		    	name: "考试",
		        type: 'category',
		        boundaryGap: false,
		        data: (function() {
		        	var array = [];
		        	for(var i = list.length - 1; i >= 0; i--) {
		        		var examName = list[i].examName+"("+
        				list[i].termName.substring(list[i].termName.lastIndexOf("学年")+2,
    	        				list[i].termName.lastIndexOf("学年")+3)+")";
		        		array.push(examName);
		        		examTemp[examName] = list[i].examId;
		        	}
		        	return array;
		        }()),
		        axisLabel: {
		        	interval: 0, 
		        	rotate: 80
		        }
		    },
		    yAxis: {
		        type: 'value',
		        name: "分数"
		    },
		    series: (function() {
		    	var array = [], chineseList = [], mathList = [], 
		    		englishList = [], sumList = [];
		    	for(var i = list.length - 1; i >= 0; i--) {
		    		chineseList.push(list[i].chineseScore);
		    		mathList.push(list[i].mathScore);
		    		englishList.push(list[i].englishScore);
		    		sumList.push(list[i].sumScore);
		    	}
		    	array.push({
		        	name: "语文",
		            type:'line',
		            symbol: 'arrow',
		            symbolSize: 15,
		            data: chineseList
		    	});
		    	array.push({
		        	name: "数学",
		            type:'line',
		            symbol: 'arrow',
		            symbolSize: 15,
		            data: mathList
		    	});
			    array.push({
		        	name: "英语",
		            type:'line',
		            symbol: 'arrow',
		            symbolSize: 15,
		            data: englishList
		    	});
			    array.push({
		        	name: "总分",
		            type:'line',
		            symbol: 'arrow',
		            symbolSize: 15,
		            data: sumList
		    	});
			    return array;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	    myChart.on('click', function (params) {
    		if(examTemp[params.name] != null) {
    			currExam(examTemp[params.name]);
    			$.alert(params.name+", 考试数据加载成功", "");
    		}
	    });
	}
	
	function totalTermExamReport(list) {
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('totalTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:["语文", "数学", "英语", "总分"]
		    },
		    grid: {
		    	hoverable:true,
		    	bottom: '35%'
		    },
		    dataZoom: [{
	            show: true,
	            realtime: true,
	            start: 0,
	            end: 100
	        }],
		    xAxis: {
		    	name: "考试",
		        type: 'category',
		        boundaryGap: false,
		        data: (function() {
		        	var array = [];
		        	for(var i = list.length - 1; i >= 0; i--) {
		        		var examName = getGradeName1(list[i].termName.substring(0, 4), "${student.grade}") + "年级" +
		        			list[i].termName.substring(list[i].termName.length - 3, list[i].termName.length) + 
		        			list[i].examName;
		        		array.push(examName);
		        		examTemp[examName] = list[i].examId;
		        	}
		        	return array;
		        }()),
		        axisLabel: {
		        	interval: 0, 
		        	rotate: 80
		        }
		    },
		    yAxis: {
		        type: 'value',
		        name: "分数"
		    },
		    series: (function() {
		    	var array = [], chineseList = [], mathList = [], englishList = [], sumList = [];
		    	for(var i = list.length - 1; i >= 0; i--) {
		    		chineseList.push(list[i].chineseScore);
		    		mathList.push(list[i].mathScore);
		    		englishList.push(list[i].englishScore);
		    		sumList.push(list[i].sumScore);
		    	}
		    	array.push({
		        	name: "语文",
		            type:'line',
		            data: chineseList
		    	});
		    	array.push({
		        	name: "数学",
		            type:'line',
		            data: mathList
		    	});
			    array.push({
		        	name: "英语",
		            type:'line',
		            data: englishList
		    	});
			    array.push({
		        	name: "总分",
		            type:'line',
		            data: sumList
		    	});
			    return array;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
</script>
</html>